

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';


void main(List<String> args) {
  runApp(MyApp());
}
List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      },
       {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      }

  ];
//自定义组件
class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: LaugoutDemo(),
      ),
      theme: ThemeData(
          // brightness: Brightness.light,
          primarySwatch: Colors.yellow),
    );
  }
}
//层叠
class LaugoutDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          elevation: 4.0,
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
             AspectRatio(
               aspectRatio: 16/9,
               child: Image.network("https://res11.bignox.com/player/www/ca9b622cce8d0dfe3f94787738dcd16c/FHDHACHGBbPN8Jn.jpg",
                fit: BoxFit.cover,
               ),
             ),
             ListTile(
               leading: ClipOval(
                 child: Image.network(
                   "https://res11.bignox.com/player/www/dcd4813a71710a85aeda230fd3a7f8e5/FGDHHDKHDc2xxxH.jpg",
                    width:60,
                    height:60,
                    fit: BoxFit.cover,
                 ),
               ),
               title: Text("标题哦"),
               subtitle: Text("副标题"),
             )
            ],
          ),
        ),
        Card(
          elevation: 4.0,
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
             AspectRatio(
               aspectRatio: 16/9,
               child: Image.network("https://res11.bignox.com/player/www/ca9b622cce8d0dfe3f94787738dcd16c/FHDHACHGBbPN8Jn.jpg",
                fit: BoxFit.cover,
               ),
             ),
             ListTile(
               leading: ClipOval(
                 child: Image.network(
                   "https://res11.bignox.com/player/www/dcd4813a71710a85aeda230fd3a7f8e5/FGDHHDKHDc2xxxH.jpg",
                    width:60,
                    height:60,
                    fit: BoxFit.cover,
                 ),
               ),
               title: Text("标题哦"),
               subtitle: Text("副标题"),
             )
            ],
          ),
        ),
        Card(
          elevation: 4.0,
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
             AspectRatio(
               aspectRatio: 16/9,
               child: Image.network("https://res11.bignox.com/player/www/ca9b622cce8d0dfe3f94787738dcd16c/FHDHACHGBbPN8Jn.jpg",
                fit: BoxFit.cover,
               ),
             ),
             ListTile(
               leading: ClipOval(
                 child: Image.network(
                   "https://res11.bignox.com/player/www/dcd4813a71710a85aeda230fd3a7f8e5/FGDHHDKHDc2xxxH.jpg",
                    width:60,
                    height:60,
                    fit: BoxFit.cover,
                 ),
               ),
               title: Text("标题哦"),
               subtitle: Text("副标题"),
             )
            ],
          ),
        ),
        Card(
          elevation: 4.0,
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
             AspectRatio(
               aspectRatio: 16/9,
               child: Image.network("https://res11.bignox.com/player/www/ca9b622cce8d0dfe3f94787738dcd16c/FHDHACHGBbPN8Jn.jpg",
                fit: BoxFit.cover,
               ),
             ),
             ListTile(
               leading: ClipOval(
                 child: Image.network(
                   "https://res11.bignox.com/player/www/dcd4813a71710a85aeda230fd3a7f8e5/FGDHHDKHDc2xxxH.jpg",
                    width:60,
                    height:60,
                    fit: BoxFit.cover,
                 ),
               ),
               title: Text("标题哦"),
               subtitle: Text("副标题"),
             )
            ],
          ),
        ),
        Card(
          elevation: 4.0,
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
             AspectRatio(
               aspectRatio: 16/9,
               child: Image.network("https://res11.bignox.com/player/www/ca9b622cce8d0dfe3f94787738dcd16c/FHDHACHGBbPN8Jn.jpg",
                fit: BoxFit.cover,
               ),
             ),
             ListTile(
               leading: ClipOval(
                 child: Image.network(
                   "https://res11.bignox.com/player/www/dcd4813a71710a85aeda230fd3a7f8e5/FGDHHDKHDc2xxxH.jpg",
                    width:60,
                    height:60,
                    fit: BoxFit.cover,
                 ),
               ),
               title: Text("标题哦"),
               subtitle: Text("副标题"),
             )
            ],
          ),
        ),
        Card(
          elevation: 4.0,
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
             AspectRatio(
               aspectRatio: 16/9,
               child: Image.network("https://res11.bignox.com/player/www/ca9b622cce8d0dfe3f94787738dcd16c/FHDHACHGBbPN8Jn.jpg",
                fit: BoxFit.cover,
               ),
             ),
             ListTile(
               leading: ClipOval(
                 child: Image.network(
                   "https://res11.bignox.com/player/www/dcd4813a71710a85aeda230fd3a7f8e5/FGDHHDKHDc2xxxH.jpg",
                    width:60,
                    height:60,
                    fit: BoxFit.cover,
                 ),
               ),
               title: Text("标题哦"),
               subtitle: Text("副标题"),
             )
            ],
          ),
        )
      ],
    );
  }
}


//AspectRatio  根据上一级 调整自身的宽高（宽相同 高是个比例）
